<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">签收</h2>
  </header>
  <div class="page">
    <div class="form-box displayflex">
      <div class="label">订单编号</div>
      <div class="ctx flex1 txt-rit">{{bbilllist.BBillNo}}
      </div>
    </div>
    <div class="form-box displayflex" v-if="mainlist.ConsignTime">
      <div class="label">取货时间</div>
      <div class="ctx flex1 txt-rit">{{mainlist.ConsignTime | timeshort}}
      </div>
    </div>
    <div class="form-box displayflex" v-if="mainlist.ReceiveTime">
      <div class="label">签收时间</div>
      <div class="ctx flex1 txt-rit">{{mainlist.ReceiveTime | timeshort}}
      </div>
    </div>
    <div class="form-box displayflex" v-if="mainlist.LastArrivalArrivedDate">
      <div class="label">要求到达时间</div>
      <div class="ctx flex1 txt-rit">{{mainlist.LastArrivalArrivedDate | timeshort}}
      </div>
    </div>
    <ul class="main-list mb20">
      <li class="displayflex">
        <span class="flex1">计划签收</span>
        <span>{{mainlist.OrdersPKGS}}件</span>
      </li>
      <li class="displayflex">
        <span class="flex1">实际签收</span>
        <span><input type="tel" placeholder="请输入" class="txt-rit ft16" v-model="recPKGS">件</span>
      </li>
    </ul>

    <template v-if="mainlist.BusTicketAmount">
      <div class="form-box displayflex">
        <div class="label">购票费</div>
        <div class="ctx flex1">
          <input type="tel" class="txt-rit org" placeholder="请输入" v-model="longDistance" readonly>
        </div>
        <i class="rit">元</i>
      </div>
      <div class="detail-goods mb20">
      <div class="tit">购票凭证</div>
        <ul class="pic-ctx cf">
          <li v-for="(item , index) in BusTicketPic">
            <div class="pic" @click="previewPic1(index)">
              <img :src="item | simpleImgUrl">
            </div>
          </li>
        </ul>
      </div>
      <previewer :list="list1" ref="previewer1"></previewer>
    </template>


    <div class="form-switch">
      <x-switch title="预约回送" v-model="stringValue" prevent-default @on-click=""></x-switch>
      <div class="server"></div>
    </div>
    <div class="form-wrap2 mb20">
      <p class="txt">上传签收凭证</p>
      <uploader-imgs :word="'凭证'" v-model="picJson" :list="picJson"></uploader-imgs>
    </div>
    <div class="form-box displayflex">
      <div class="label">备注</div>
      <div class="ctx flex1">
        <textarea placeholder="请输入"></textarea>
      </div>
    </div>
  </div>
  <div class="btn-bottom"><div class="btn" @click="signBtn">确认签收</div></div>
</div>
</template>

<script>
import uploaderImgs from "@/components/share/uploaders.vue";
export default {
  name: "sign",
  components: {
    uploaderImgs
  },
  data() {
    return {
      Memo: "",
      bbilllist: [],
      mainlist: [],
      goodslist: [],
      HandOver: [],
      showLoad: true,
      recPKGS: "",
      picJson: {
        imgLista: [],
        imgListBase: []
      },
      stringValue: false,
      BusTicketPic: [],
      list1: [],
      longDistance:'',
    };
  },
  created() {
    this.getData();
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    }
  },
  methods: {
    previewPic1: function(index) {
      this.$refs.previewer1.show(index);
    },
    goBack() {
      this.$router.go(-1);
    },
    getData() {
      if(this.userinfo.UserBizType == 'Driver') {
        this.$router.replace({
          path: "/login",
        });
      }

      var guid = this.$route.query.id;
      var self = this;
      var query = {
        Guid: guid
      };
      this.Ajax.post("GetOrderDetail", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          self.bbilllist = resp.Data.Bill;
          self.mainlist = resp.Data.Main;
          self.goodslist = resp.Data.BbDetial;
          self.HandOver = resp.Data.HandOver;
          self.recPKGS = self.mainlist.OrdersPKGS;

          if(self.mainlist.BusTicketAmount)
          {
            self.longDistance = self.mainlist.BusTicketAmount.toFixed(2);
          }
          
          if(self.mainlist.BusTicketPic)
          {
            self.BusTicketPic = JSON.parse(self.mainlist.BusTicketPic);
            //重组list
            for (var i = 0; i < self.BusTicketPic.length; i++) {
              var value = {
                src: "https://image.csyaoly.com" + self.BusTicketPic[i]
              };
              self.list1.push(value);
            }
          }

        }
      });
    },
    signBtn() {
      var _this = this;
      if(_this.mainlist.State != '56')
      {
        _this.$vux.alert.show({
          title: '注意',
          content: '该订单还未交货，不能签收',
        });
        return false;
      }

      if(_this.mainlist.CargoOwnerGuid != _this.userinfo.BelongGuid)
      {
        _this.$vux.alert.show({
          title: '注意',
          content: '该单据不属于当前货主，请核对信息后再操作',
        });
        return false;
      }

      if(_this.mainlist.StartBusTerminal && _this.mainlist.StartBusTerminal != '')
      {
        console.log('有中转');
        var TicketFee = _this.mainlist.BusTicketAmount,
            flag = false;

        if(TicketFee != null && TicketFee != '' && TicketFee != 0){
          flag = true;
        } else {
          flag = false;
        }
        console.log(flag);

        if(_this.BusTicketPic != null && _this.BusTicketPic != '' && _this.BusTicketPic.length != 0){
          flag = true;
        } else {
          flag = false;
        }
        console.log(flag);

        if(!flag){
          _this.$vux.alert.show({
            title: '提示',
            content: '配送员尚未上传购票凭证，请在配送员上传后进行签收操作',
          });
          return false;
        } else {
          Confirm();
        }
      } else {
        Confirm();
      }

      function Confirm(){
        _this.$vux.confirm.show({
          title: "提示",
          content: "签收后视为配送员已按要求送达货物，并向配送员付费，确定签收吗？",
          onConfirm() {
            _this.sign();
          }
        });
      }
    },

    sign() {
      this.showLoad = true;
      var _this = this;
      var query = {
        Guid: _this.$route.query.id,
        RecPKGS: _this.recPKGS,
        RowNo: "1",
        Memo: _this.Memo,
        State: "81",
        ImgUrlList: _this.picJson.imgListBase,
        ImgUrlOrgList: _this.picJson.imgLista,
        LoginedStaffID: _this.userinfo.StaffID,
        LoginedName: _this.userinfo.Name,
        IsEcho: _this.stringValue
      };
      this.Ajax.post("ReceivingConfirm", query).then(function(resp) {
        _this.showLoad = false;
        if (resp.IsSuccess) {
          _this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: "签收完成",
            onHide() {
              if (_this.stringValue == true) {
                _this.$router.push({
                  path: "/onlineOrder",
                  query: { id: _this.$route.query.id, Billtype: "2" }
                });
              } else {
                _this.$router.push({
                  path: "/orderList"
                });
              }
            }
          });
        } else {
          _this.$vux.toast.show({
            type: "text",
            width: "auto",
            text: resp.ErrorMessage
          });
          _this.$router.push({
            path: "/orderList"
          });
        }
      });
    }
  }
};
</script>